<!--
  * 项目表
  *
  * @Author:    zzx
  * @Date:      2025-08-07 13:47:01
  * @Copyright  zzx
-->
<template>
  <a-modal
      :title="form.projectId ? '编辑' : '添加'"
      :width="900"
      :open="visibleFlag"
      @cancel="onClose"
      :maskClosable="false"
      :destroyOnClose="true"
  >
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }" >
        <a-form-item label="客户"  name="enterpriseId">
          <a-select
              v-model:value="selectFuncId"
              :style="`width: ${width}`"
              :placeholder="selectProps.placeholder"
              :showSearch="true"
              :allowClear="true"
              :size="size"
              @change="onChange"
              :disabled="form.projectId"
          >
            <a-select-option v-for="item in enterpriseList" :key="item.enterpriseId" :value="item.enterpriseId">
              {{ item.enterpriseName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="项目名称"  name="projectName">
          <a-input style="width: 100%" v-model:value="form.projectName" placeholder="项目名称" />
        </a-form-item>
        <a-row :gutter="30">
          <a-col :span="6">
            <a-form-item label="职位"  name="positionUser1">
              <a-input style="width: 100%" v-model:value="form.positionUser1" placeholder="职位" />
            </a-form-item>
          </a-col>
          <a-col :span="9">
            <a-form-item label="联系人"  name="projectUser1">
              <a-input style="width: 100%" v-model:value="form.projectUser1" placeholder="联系人" />
            </a-form-item>
          </a-col>
          <a-col :span="9">
            <a-form-item label="电话"  name="projectUserTel1">
              <a-input style="width: 100%" v-model:value="form.projectUserTel1" placeholder="联系人电话" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="6">
            <a-form-item label="职位"  name="positionUser2">
              <a-input style="width: 100%" v-model:value="form.positionUser2" placeholder="职位" />
            </a-form-item>
          </a-col>
          <a-col :span="9">
            <a-form-item label="联系人"  name="projectUser2">
              <a-input style="width: 100%" v-model:value="form.projectUser2" placeholder="联系人" />
            </a-form-item>
          </a-col>
          <a-col :span="9">
            <a-form-item label="电话"  name="projectUserTel2">
              <a-input style="width: 100%" v-model:value="form.projectUserTel2" placeholder="联系人电话" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="6">
            <a-form-item label="职位"  name="positionUser3">
              <a-input style="width: 100%" v-model:value="form.positionUser3" placeholder="职位" />
            </a-form-item>
          </a-col>
          <a-col :span="9">
            <a-form-item label="联系人"  name="projectUser3">
              <a-input style="width: 100%" v-model:value="form.projectUser3" placeholder="联系人" />
            </a-form-item>
          </a-col>
          <a-col :span="9">
            <a-form-item label="电话"  name="projectUserTel3">
              <a-input style="width: 100%" v-model:value="form.projectUserTel3" placeholder="联系人电话" />
            </a-form-item>
          </a-col>
        </a-row>
      <a-form-item label="所在城市" name="provinceCityDistrict">
        <AreaCascader type="province_city_district" style="width: 100%" v-model:value="area" placeholder="请选择所在城市" @change="changeArea" />
      </a-form-item>
        <a-form-item label="详细地址"  name="address">
          <a-input style="width: 100%" v-model:value="form.address" placeholder="详细地址" />
        </a-form-item>
        <a-form-item label="备注"  name="remark">
          <a-textarea style="width: 100%" v-model:value="form.remark" placeholder="备注" />
        </a-form-item>
    </a-form>

    <template #footer>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </a-space>
    </template>
  </a-modal>
</template>
<script setup>
  import {reactive, ref, nextTick, onMounted, watch} from 'vue';
  import _ from 'lodash';
  import { message } from 'ant-design-vue';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { projectInfoApi } from '/@/api/business/project/project-info-api';
  import { enterpriseApi } from '/@/api/business/oa/enterprise-api';
  import { smartSentry } from '/@/lib/smart-sentry';
  import {funcExpressionApi} from "/@/api/business/expression/func-expression-api.js";
  import AreaCascader from "/@/components/framework/area-cascader/index.vue";

  // ------------------------ 事件 ------------------------

  const emits = defineEmits(['reloadList']);

  // ------------------------ 显示与隐藏 ------------------------
  // 是否显示
  const visibleFlag = ref(false);

  function show(rowData) {
    Object.assign(form, formDefault);
    if (rowData && !_.isEmpty(rowData)) {
      Object.assign(form, rowData);
    }
    // 使用字典时把下面这注释修改成自己的字典字段 有多个字典字段就复制多份同理修改 不然打开表单时不显示字典初始值
    // if (form.status && form.status.length > 0) {
    //   form.status = form.status.map((e) => e.valueCode);
    // }
    visibleFlag.value = true;
    selectValue.value = {}
    if (rowData.projectId && rowData.enterpriseId) {
      selectFuncId.value = rowData.enterpriseId
    }
    nextTick(() => {
      formRef.value.clearValidate();
    });
  }

  function onClose() {
    Object.assign(form, formDefault);
    visibleFlag.value = false;
  }

  // ------------------------ 表单 ------------------------

  // 组件ref
  const formRef = ref();

  const formDefault = {
      projectId: undefined,
      enterpriseId: undefined, //客户id
      projectName: undefined, //项目名称
      positionUser1: "老板", //联系人1
      projectUser1: undefined, //联系人1
      projectUserTel1: undefined, //联系人1电话
      positionUser2: "生产经理", //2 职位
      projectUser2: undefined, //联系人2
      projectUserTel2: undefined, //联系人2电话
      positionUser3: "技术总工", //联系人3
      projectUser3: undefined, //联系人3
      projectUserTel3: undefined, //联系人3电话
      province: undefined, //省
      provinceName: undefined, //省
      city: undefined, //市
      cityName: undefined, //市
      district: undefined, //县
      districtName: undefined, //县
      address: undefined, //详细地址
      remark: undefined, //备注
  };

  let form = reactive({ ...formDefault });

  const rules = {
    enterpriseId: [{ required: true, message: '项目企业 必填' }],
    projectName: [{ required: true, message: '项目名称 必填' }],
    projectUser1: [{ required: true, message: '项目联系人 必填' }],
    projectUserTel1: [{ required: true, message: '项目联系人 必填' }],
  };

  // 点击确定，验证表单
  async function onSubmit() {
    try {
      await formRef.value.validateFields();
      save();
    } catch (err) {
      message.error('参数验证错误，请仔细填写表单数据!');
    }
  }

  // 新建、编辑API
  async function save() {
    SmartLoading.show();
    try {
      if (form.projectId) {
        await projectInfoApi.update(form);
      } else {
        await projectInfoApi.add(form);
      }
      message.success('操作成功');
      emits('reloadList');
      onClose();
    } catch (err) {
      smartSentry.captureError(err);
    } finally {
      SmartLoading.hide();
    }
  }

  const selectProps = defineProps({
    value: [Number],
    placeholder: {
      type: String,
      default: '请选择',
    },
    width: {
      type: String,
      default: '100%',
    },
    size: {
      type: String,
      default: 'default',
    },
    keywords: {
      type: String,
      default: null,
    },
    // 禁用标识
    disabledFlag: {
      type: Number,
      default: 0,
    },
  });

  const enterpriseList = ref([])
  async function queryEnterpriseList() {
    try {
      let params = {
        pageNum: 1,
        pageSize: 500,
      };
      if (null != selectProps.disabledFlag) {
        params.disabledFlag = selectProps.disabledFlag;
      }
      if (null != selectProps.keywords) {
        params.keywords = selectProps.keywords;
      }
      let resp = await enterpriseApi.pageQuery(params);
      enterpriseList.value = resp.data.list;
    } catch (e) {
      smartSentry.captureError(e);
    }
  }
  onMounted(queryEnterpriseList);
  const selectFuncId = ref(selectProps.value);

  watch(
      () => selectProps.value,
      (newValue) => {
        selectFuncId.value = newValue;
      }
  );

  let selectValue = {}
  function onChange(value) {
    selectValue = enterpriseList.value.find(item => item.enterpriseId === value)
    form.enterpriseId = selectValue.enterpriseId
    form.projectUser1 = selectValue.contact
    form.projectUserTel1 = selectValue.contactPhone
    form.province = selectValue.province
    form.provinceName = selectValue.provinceName
    form.city = selectValue.city
    form.cityName = selectValue.cityName
    form.district = selectValue.district
    form.districtName = selectValue.districtName
    form.address = selectValue.address
    area.value = [
      {
        value: form.province,
        label: form.provinceName,
      },
      {
        value: form.city,
        label: form.cityName,
      },
      {
        value: form.district,
        label: form.districtName,
      },
    ];
  }

// 地区
const area = ref([]);

function changeArea(value, selectedOptions) {
  Object.assign(form, {
    province: '',
    provinceName: '',
    city: '',
    cityName: '',
    district: '',
    districtName: '',
  });
  if (!_.isEmpty(selectedOptions)) {
    // 地区信息
    form.province = area.value[0].value;
    form.provinceName = area.value[0].label;

    form.city = area.value[1].value;
    form.cityName = area.value[1].label;
    if (area.value[2]) {
      form.district = area.value[2].value;
      form.districtName = area.value[2].label;
    }
  }
}

  defineExpose({
    show,
  });
</script>
